<template>
  <div class="about">
    <el-card class="about-card" shadow="never">
      <template #header>
        <div class="card-header">
          <el-icon size="24" color="#2e7d32"><InfoFilled /></el-icon>
          <span>关于平台</span>
        </div>
      </template>
      
      <div class="about-content">
        <div class="platform-intro">
          <h2>中山大学研究生院校企对接平台</h2>
          <p class="intro-text">
            本平台旨在促进产学研深度融合，为企业和高校搭建合作桥梁，助力研究生培养质量提升。
          </p>
          
          <div class="features-list">
            <h3>主要功能</h3>
            <el-row :gutter="24">
              <el-col :span="12">
                <ul>
                  <li>企业课题发布与管理</li>
                  <li>导师学生课题申请</li>
                  <li>智能匹配推荐</li>
                  <li>三方确认机制</li>
                </ul>
              </el-col>
              <el-col :span="12">
                <ul>
                  <li>申请进度跟踪</li>
                  <li>数据统计分析</li>
                  <li>用户权限管理</li>
                  <li>系统监控维护</li>
                </ul>
              </el-col>
            </el-row>
          </div>
        </div>
        
        <el-divider />
        
        <div class="test-accounts">
          <h3>测试账户</h3>
          <p class="test-desc">您可以使用以下测试账户体验不同角色的功能：</p>
          
          <el-table :data="testAccounts" border stripe>
            <el-table-column prop="role" label="角色" width="120">
              <template #default="{ row }">
                <el-tag :type="getRoleTagType(row.role)" size="small">
                  {{ getRoleText(row.role) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="150" />
            <el-table-column prop="password" label="密码" width="120" />
            <el-table-column prop="description" label="功能说明" />
            <el-table-column label="操作" width="120" align="center">
              <template #default="{ row }">
                <el-button 
                  type="primary" 
                  size="small" 
                  @click="copyAccount(row)"
                >
                  复制
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
        <el-divider />
        
        <div class="contact-info">
          <h3>联系我们</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="平台名称">中山大学研究生院校企对接平台</el-descriptions-item>
            <el-descriptions-item label="技术支持">中山大学信息与网络中心</el-descriptions-item>
            <el-descriptions-item label="联系电话">020-12345678</el-descriptions-item>
            <el-descriptions-item label="联系邮箱">platform@sysu.edu.cn</el-descriptions-item>
            <el-descriptions-item label="平台地址">广州市海珠区新港西路135号</el-descriptions-item>
            <el-descriptions-item label="服务时间">周一至周五 9:00-18:00</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const testAccounts = [
  {
    role: 'enterprise',
    username: 'enterprise1',
    password: '123456',
    description: '可发布课题、查看申请、管理项目'
  },
  {
    role: 'supervisor',
    username: 'supervisor1',
    password: '123456',
    description: '可申请课题、查看申请进度、指导学生'
  },
  {
    role: 'student',
    username: 'student1',
    password: '123456',
    description: '可申请课题、查看申请进度、参与研究'
  },
  {
    role: 'admin',
    username: 'admin',
    password: '123456',
    description: '可管理匹配、查看统计、系统维护'
  }
]

const getRoleTagType = (role: string) => {
  const typeMap: Record<string, string> = {
    enterprise: 'success',
    supervisor: 'primary',
    student: 'warning',
    admin: 'danger'
  }
  return typeMap[role] || 'info'
}

const getRoleText = (role: string) => {
  const textMap: Record<string, string> = {
    enterprise: '企业用户',
    supervisor: '导师用户',
    student: '学生用户',
    admin: '管理员'
  }
  return textMap[role] || '未知用户'
}

const copyAccount = (account: any) => {
  const text = `用户名：${account.username}\n密码：${account.password}\n角色：${getRoleText(account.role)}`
  
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text).then(() => {
      ElMessage.success('账户信息已复制到剪贴板')
    })
  } else {
    // 降级处理
    const textArea = document.createElement('textarea')
    textArea.value = text
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
    ElMessage.success('账户信息已复制到剪贴板')
  }
}
</script>

<style scoped>
.about {
  max-width: 1000px;
  margin: 0 auto;
}

.about-card {
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--primary-color);
}

.about-content {
  padding: 20px 0;
}

.platform-intro h2 {
  color: var(--primary-color);
  margin-bottom: 16px;
  font-size: 24px;
}

.intro-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.features-list h3 {
  color: var(--text-primary);
  margin-bottom: 16px;
  font-size: 18px;
}

.features-list ul {
  padding-left: 20px;
  color: var(--text-secondary);
  line-height: 1.8;
}

.features-list li {
  margin-bottom: 8px;
}

.test-accounts h3 {
  color: var(--text-primary);
  margin-bottom: 16px;
  font-size: 18px;
}

.test-desc {
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.6;
}

.contact-info h3 {
  color: var(--text-primary);
  margin-bottom: 16px;
  font-size: 18px;
}

.el-divider {
  margin: 32px 0;
}

.el-table {
  margin-bottom: 20px;
}

.el-table th {
  background-color: var(--background-secondary);
  color: var(--text-primary);
  font-weight: 600;
}
</style>
